<template>
  <div class="not-found-container">
    <!-- 黑洞背景 -->
    <div class="black-hole">
      <div class="event-horizon"></div>
      <div class="singularity"></div>
      <div class="accretion-disk"></div>
    </div>

    <!-- 内容卡片 -->
    <div class="content-card">
      <h1 class="error-code">404</h1>
      <p class="error-message">页面消失在黑洞中...</p>
      <router-link to="/" class="btn-back">
        <span>返回安全地带</span>
        <i class="fa fa-arrow-right"></i>
      </router-link>
    </div>
  </div>
</template>

<script setup>
// 可以添加一些动画控制逻辑
const onMounted = () => {
  // 可以在这里添加更多动画控制
}

onMounted()
</script>




<style scoped>
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e2a 0%, #1a1a2e 100%);
  overflow: hidden;
  position: relative;
}

/* 黑洞效果 */
.black-hole {
  position: absolute;
  width: 600px;
  height: 600px;
  z-index: 0;
  animation: pulse 8s infinite alternate ease-in-out;
}

.event-horizon {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(10,14,42,0.8) 70%, rgba(26,26,46,0.4) 100%);
  box-shadow: 0 0 100px rgba(255, 255, 255, 0.1);
}

.singularity {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 20%, rgba(0,0,0,1) 100%);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.6);
  animation: glow 3s infinite alternate ease-in-out;
}

.accretion-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: conic-gradient(
      from 0deg,
      rgba(255, 100, 100, 0.1) 0deg,
      rgba(255, 150, 50, 0.2) 45deg,
      rgba(255, 255, 100, 0.3) 90deg,
      rgba(100, 255, 100, 0.2) 135deg,
      rgba(100, 100, 255, 0.1) 180deg,
      rgba(150, 50, 255, 0.2) 225deg,
      rgba(255, 100, 255, 0.3) 270deg,
      rgba(255, 100, 100, 0.1) 315deg,
      rgba(255, 100, 100, 0.1) 360deg
  );
  animation: rotate 15s linear infinite;
  filter: blur(10px);
}

@keyframes rotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glow {
  0% { box-shadow: 0 0 60px rgba(255, 255, 255, 0.4); }
  100% { box-shadow: 0 0 80px rgba(255, 255, 255, 0.8); }
}

@keyframes pulse {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

/* 内容卡片样式 */
.content-card {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 40px;
  color: white;
  animation: fadeIn 1.5s ease-out;
}

.error-code {
  font-size: 10rem;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease;
}

.error-message {
  font-size: 1.5rem;
  margin: 20px 0 40px;
  color: #ddd;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-back:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
}

.btn-back span {
  position: relative;
  z-index: 2;
}

.btn-back i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.btn-back:hover i {
  transform: translateX(5px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 星星背景效果 */
.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
</style>